<template>
  <div class="chair-card">

    
      <img 
        :src="avatar"  
        class="box-img"
      />
      <p style="font-size: 18px;font-weight: bold;text-align: center;text-indent: 0;">{{ hname }}</p>
      <p style="font-size: 16px;color: gray;text-align: center;text-indent: 0;">{{ synopsis }}</p>



    <!-- <el-card :body-style="{ padding: '0px' }" class="speaker-box" @click.native="dialogVisible = true" shadow="never">
      <span slot="header" style="font-size:18px;"> {{ hname }} </span>
      

      <div style="margin-top: -5px;">
        <span style="font-size:16px;">{{synopsis}}</span>
      </div>
    </el-card> -->
    <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->

    <!-- <el-dialog
      :title="hname"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div class="more-info" v-html="moreInfo"></div>
    </el-dialog> -->


  </div>
</template>

<script>
export default { 
  props: {
    hname : {type:String,default:"hname"},
    name : {type:String,default:"name"},
    synopsis : {type:String,default:"synopsis"},
    imgUrl: {type:String,default:""},
    moreInfo: {type:String,default:""},
  },
  data() {
    return {
      dialogVisible: false,
      avatar: "https://dummyimage.com/135x180/ff6a00/fff"
    };
  },
  methods: {
    // handleClick(){
    //   this.dialogVisible = true;
    //   console.log(this.dialogVisible);
    // }
  },
  created(){
    if (this.imgUrl !== "") {
      this.avatar = this.imgUrl
    }
  }

};
</script>

<style lang="less" scoped>
@card-width: 300px;
@card-height: 320px;

.chair-card{
  min-width: 350px;
  text-align: center;
  margin: 10px 15px;
  display: inline-block;
  // vertical-align: middle;
  text-indent: 0;

}

.box-img
{
  width: 180px !important ;
  // max-width: 240px;
  height: 240px !important ;
  object-fit: contain;

}




</style>
